<template>
  <a-table
    :dataSource="dataSource"
    :columns="columnsFilter"
    :pagination="query"
    @change="onChange"
    :size="lineheight"
    :row-selection="rowSelectionActive ? rowSelection : null"
    :filter="query.filters"
    force-render
  >
    <template #bodyCell="{ column = {}, text, record, index }">
      <template v-if="column.key === 'operation'">
        <edit-button
          :data="record"
          :rules="rules"
          v-model:editing="record.editing"
          v-model:loading="record.loading"
          @submit="onSubmit(index)"
          v-if="permission.edit"
        />
        <cancel-button
          :data="record"
          :rules="rules"
          v-model:editing="record.editing"
          v-if="record.editing"
        />
        <!-- <invalid-button :data="record" v-else /> -->
        <more-button :data="record" v-else />
      </template>
      <template v-if="column.key === 'note'">
        <a-input
          type="text"
          v-model:value="record[column.key]"
          :disabled="record.loading"
          v-if="record.editing"
          placeholder="请输入"
          :maxlength="500"
        />
        <a-tooltip v-else>
          <template #title>{{ text }} </template>
          <div
            style="
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            "
          >
            {{ text }}
          </div>
        </a-tooltip>
      </template>
      <template v-if="column.key === 'dataName'">
        <input-name
          v-if="record.editing"
          v-model:name="record[column.key]"
          :loading="record.loading"
          :data="record"
          :rules="rules"
          :ref="el => setNameRefs(el, index)"
        />
        <a-tooltip v-else>
          <template #title>{{ text }} </template>
          <div style="display: flex; flex-wrap: nowrap; align-items: center">
            <span style="font-size: 24px; margin-right: 23px">
              <iconfont
                v-if="record.dataType === 'folder'"
                name="#icon-wenjianjia"
              />
              <iconfont v-else name="#icon-wenjian" />
            </span>
            <folder-drawer v-if="record.dataType === 'folder'" :data="record" />
            <div
              v-else
              style="
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              "
            >
              {{ text }}
            </div>
          </div>
        </a-tooltip>
      </template>
      <template v-if="column.key === 'dataStatus'">
        <div style="display: flex; flex-wrap: nowrap; align-items: center">
          <span
            :style="{
              width: '6px',
              height: '6px',
              borderRadius: '100%',
              marginRight: '8px',
              backgroundColor: record.dataStatus === 1 ? '#0086ff' : '#52c41a',
            }"
            v-if="record.dataStatus === 1 || record.dataStatus === 2"
          ></span>
          <div v-if="record.dataStatus === 0">未发布</div>
          <div v-else-if="record.dataStatus === 1">已发布</div>
          <div v-else-if="record.dataStatus === 2">占用</div>
          <div v-else-if="record.dataStatus === 3">待删除</div>
          <div v-else>{{ record.dataStatus }}</div>
        </div>
      </template>
      <template v-if="column.key === 'gmtCreate'">
        {{ gmtCreateFormat(text) }}
      </template>
    </template>
    <template #emptyText>
      <div
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100%;
        "
      >
        <a-spin :spinning="loading">
          <a-empty
            :image="notData"
            :description="loading ? '加载中...' : '暂无数据'"
          />
        </a-spin>
      </div>
    </template>
  </a-table>
  <!-- </a-config-provider> -->
</template>
<script setup>
import { computed, onMounted, ref, watch } from 'vue'
import dayjs from 'dayjs'
import ATable from '@/components/table.vue'
import EditButton from './table-content-edit.vue'
import CancelButton from './table-content-cancel.vue'
import InvalidButton from './table-content-invalid.vue'
import InputName from './table-content-input-name.vue'
import MoreButton from './table-content-more.vue'
import iconfont from '@/components/iconfont.vue'
import FolderDrawer from './table-content-folder-drawer.vue'
import notData from '@/assets/images/not-data.png'
import {
  useColumns,
  useQuery,
  useDataSourceManager,
  useDataSource,
  useLineheight,
  useLoading,
  useGroupId,
  useRowSelection,
  useRowSelectionActive,
  useSortCreatetimeType,
  usePermission,
} from './provide-context.js'

/**
 * 全局数据
 */
let columns = useColumns()
let dataSource = useDataSource()
let query = useQuery()
let loading = useLoading()
let lineheight = useLineheight()
let groupId = useGroupId()
let { update } = useDataSourceManager()
let sortCreatetimeType = useSortCreatetimeType()
let permission = usePermission()
/**
 * 表头
 */
let columnsFilter = computed(
  () => columns?.value?.filter(({ checked }) => checked) || [],
)
/**
 * table查询逻辑
 */
//table组件翻页事件，调用hooks
function onChange({ current, pageSize }, filters, sorter) {
  query.value.current = current
  query.value.pageSize = pageSize
  query.value.filters = filters
  sortCreatetimeType.value = sorter
  //添加过滤状态
  columns?.value.forEach(column => {
    let { key } = column
    column.filteredValue = filters?.[key]
  })

  update()
}
//初始化调用
onMounted(() => {
  query.value.current = 1
  query.value.pageSize = 10
  update()
})
//groupId变化
watch(groupId, () => {
  query.value.current = 1
  update()
})
// console.log(pagination)
/**
 * 校验规则
 */
let rules = ref({
  dataName: [
    {
      // required: true,
      // message: '请输入',
      // trigger: 'change',
      validator(rule, value) {
        if (!value) return Promise.reject('请输入!')
        if (!/^[\u4e00-\u9fa5_a-zA-Z0-9+-]+$/.test(value)) {
          return Promise.reject(
            '文件名只能是中文、下划线、连字符、加号、数字、英文!',
          )
        }
        return Promise.resolve()
      },
    },
    // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
})
let nameRefs = ref({})
function setNameRefs(el, index) {
  nameRefs.value[index] = el
}
function onSubmit(index) {
  nameRefs.value[index].validate()
}
/**
 * 复选框
 */
let rowSelection = useRowSelection()
let rowSelectionActive = useRowSelectionActive()
/**
 * 时间格式化
 */
function gmtCreateFormat(t) {
  return dayjs.utc(t).format('YYYY-MM-DD HH:mm:ss')
}
</script>
